<template>
    <div class="Home">

        <v-header></v-header>
        <div class="content"> <!-- 主体内容容器 -->
            <transition name="slide-slip" mode="out-in">
                <router-view />
            </transition>
        </div>
        <v-footer></v-footer>
    </div>
</template>

<style type="text/scss" lang="scss">
// .Home {
//  background-image: url('~@/assets/images/back.jpg');
//  background-size: cover;
//  background-repeat: no-repeat;
//  background-attachment: fixed;
//  width: 100%;
//  min-height: 100vh;
//  overflow: hidden;
// }
.Home {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex: 1; /* 主体内容占据剩余空间 */
  display: flex;
  flex-direction: column;
}

.transition-common {
    transition: all .3s;
}

.slide-slip-enter-active,
.slide-slip-leave-active,
.dye-bottom-leave-active,
.dye-bottom-enter-active {
    @extend .transition-common;
}

.slide-slip-enter {
    transform: translateX(100%);
}

.slide-slip-leave-to {
    transform: translateX(-100%);
}

.dye-bottom-enter,
.dye-bottom-leave-to {
    opacity: 0.5;
}
</style>

<script>
import VHeader from "@/views/header";
import VFooter from "@/views/footer";

export default {
    name: "home",
    components: { VFooter, VHeader },//{ VFooter, VHeader }
    data() {
        return {};
    },
    watch: {},
    computed: {},
    methods: {},
    created() { },
    mounted() { },
    destroyed() { }
}                                        
</script>
